<template>
  <div class="card">
    <div style="margin-bottom: 10px">
      <a-button icon="plus" type="primary" style="margin-right: 10px" @click="addMenu">新建一级菜单</a-button>
      <a-button type="danger" @click="batchDel">批量删除</a-button>
    </div>
    <a-table
      :pagination="{
        pageSize: formData.page_size,
        pageSizeOptions: ['20', '30', '40', '50'],
        size: 'small',
        showSizeChanger: true,
        showQuickJumper: true,
        total: total,
        current: formData.page,
        showTotal: total => `共 ${total} 条`
      }"
      @change="paginChange"
      :rowKey="(record, index) => record.id"
      style="border: 1px solid #e8e8e8"
      :columns="columns"
      :data-source="tableData"
      :row-selection="rowSelection"
      bordered
    >
      <span slot="icon" slot-scope="text, record">
        <a-icon :type="record.icon"></a-icon>
      </span>
      <span slot="is_menu" slot-scope="text, record">
        <span class="statusStyle" v-if="record.is_menu && record.is_menu == 1">菜单</span>
        <span class="statusStyleD" v-if="record.is_menu == 0">按钮</span>
      </span>
      <span slot="status" slot-scope="text, record">
        <span class="statusStyle" v-if="record.status == 1">正常</span>
        <span class="statusStyleD" v-if="record.status == 0">禁用</span>
      </span>
      <span slot="operate" slot-scope="text, record">
        <span class="linkStyle" @click="addChildMenu(record.id)">添加子菜单</span>
        <span class="lineStyle">丨</span>
        <span class="linkStyle" @click="editMenu(record)">编辑</span>
        <span class="lineStyle">丨</span>
        <span class="linkStyle" @click="delMenu(record.id)">删除</span>
      </span>
    </a-table>
    <EditMenu
      :isShowAdd.sync="isShowAdd"
      :title.sync="title"
      :pidInfo.sync="pidInfo"
      :recordData.sync="recordData"
      @upload="getMenuList"
    ></EditMenu>
  </div>
</template>

<script>
import EditMenu from './dialog/EditMenu.vue'
import { getMenuListAPI, delMenuAPI } from '@/api/admin.js'
export default {
  name: 'permission',
  components: {
    EditMenu
  },
  computed: {
    rowSelection() {
      const { selectedRowKeys } = this
      return {
        selectedRowKeys,
        onChange: (selectedRowKeys, selectedRows) => {
          this.selectedRowKeys = selectedRowKeys
          this.select_rows = selectedRows
        }
      }
    }
  },
  data() {
    return {
      pidInfo: undefined,
      total: 0,
      recordData: {},
      title: '添加',
      isShowAdd: false,
      select_rows: [],
      selectedRowKeys: [],
      formData: {
        order: 'desc',
        order_by: 'id',
        page: 1,
        page_size: 50,
        search: { brand_id: process.env.VUE_APP_BRAND_ID }
      },
      tableData: [],
      columns: [
        {
          title: '标题',
          dataIndex: 'title',
          key: 'title',
          width: 300
        },
        {
          title: '#',
          dataIndex: 'id',
          key: 'id',
          align: 'center'
        },
        {
          title: '名称',
          dataIndex: 'name',
          align: 'center',
          key: 'name',
          width: 200
        },
        {
          title: '路径',
          dataIndex: 'path',
          key: 'path',
          align: 'center'
        },
        {
          title: '图标',
          dataIndex: 'icon',
          align: 'center',
          key: 'icon',
          scopedSlots: { customRender: 'icon' }
        },
        {
          title: '是否菜单',
          dataIndex: 'is_menu',
          key: 'is_menu',
          align: 'center',
          scopedSlots: { customRender: 'is_menu' }
        },
        {
          title: '状态',
          dataIndex: 'status',
          key: 'status',
          align: 'center',
          scopedSlots: { customRender: 'status' }
        },
        {
          title: '操作',
          align: 'center',
          width: 240,
          scopedSlots: { customRender: 'operate' }
        }
      ]
    }
  },
  created() {
    this.getMenuList()
  },
  methods: {
    paginChange(value) {
      this.formData.page = value.current
      this.formData.page_size = value.pageSize
      this.getMenuList()
    },
    async getMenuList() {
      const result = await getMenuListAPI(this.formData)
      this.total = result.data.list.length
      this.tableData = result.data.list
      this.select_rows = []
    },
    addMenu() {
      this.title = '新增'
      this.isShowAdd = true
    },
    editMenu(record) {
      this.recordData = record
      this.title = '修改'
      this.isShowAdd = true
    },
    addChildMenu(id) {
      this.title = '新增'
      this.pidInfo = id
      this.isShowAdd = true
    },
    delMenu(id) {
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          await delMenuAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: [id] })
          this.$message.success('操作成功')
          this.getMenuList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    },
    batchDel() {
      if (this.select_rows.length < 1) return this.$message.error('请先选中至少一行数据')
      const ids = this.select_rows.map(item => item.id)
      this.$confirm({
        title: '确认删除吗?',
        content: h => <div style="color:red;">此操作不可撤回</div>,
        onOk: async () => {
          await delMenuAPI({ brand_id: process.env.VUE_APP_BRAND_ID, ids: ids })
          this.$message.success('操作成功')
          this.getMenuList()
        },
        onCancel() {
          return
        },
        class: 'test'
      })
    }
  }
}
</script>

<style lang="less" scoped>
.card {
  padding: 10px;
  background-color: #fff;
}
.statusStyle {
  padding: 3px 5px;
  width: 35px;
  height: 8px;
  background-color: #e6f7ff;
  color: #36a0ff;
  border: 0.1px solid #91d5ff;
  font-size: 12px;
}
.statusStyleD {
  padding: 3px 5px;
  width: 35px;
  height: 8px;
  background-color: #fff7e6;
  color: #fa8c16;
  border: 0.1px solid #ffd591;
  font-size: 12px;
}
.linkStyle {
  font-size: 14px;
  padding: 3px;
  color: #1890ff;
  cursor: pointer;
}
.lineStyle {
  color: #e8e8e8;
}
</style>
